<?php loadTemp("global/empty_header.php");?>
<style type="text/css">
body {
	background-color: #DADADF;
}

body>.grid {
	height: 80%;
}

.image {
	margin-top: -100px;
}

.column {
	max-width: 450px;
}
</style>
<script>
	function showWaitMessage(mess){
		$("#waitmessage").text(mess);
		$(".ui.icon.message").show();
	}
	function hideWaitMessage(){
		$(".ui.icon.message").hide();
	}
  	function showError(mess){
		$("#backmess").text(mess);
		$("#backmess").show();
	}
$(document).ready(function() {
	$("form").submit(function(e){
		e.preventDefault();
		showWaitMessage("正在登录，请稍后。");
		$("form input").attr("readonly","true");
		$.ajax({
			type: "POST",
			dataType: "json",
			url:"login.php?ajax=true&op=login",
			data:$('form').serialize(),
			complete:function (e) {
				try{ 
		    		var json = eval(e.responseJSON);
   		    		if(json["state"]==0){
   		    			hideWaitMessage();
   		    			showError(json["message"]);
       		  		} else {
       		 	  		window.location.href="home.php";
					}
		    	}catch(err){
		    		showError("服务器返回未知数据，请联系管理员\n"+e.responseText);
		    		return;
				}
		    	$("#password").text("");
		    	$("form input").removeAttr("readonly");
		    	hideWaitMessage();
			}
		}); 
      });
  	  $(".ui.icon.message").hide();
   	  $("#backmess").hide();
      $('.ui.form').form({
          fields: {
        	 userid: {identifier: 'mail', rules: [{type: 'email', prompt: '邮箱输入必须符合格式'}, {type: 'empty', prompt: '邮箱不能为空'}]},
     	     password: {identifier: 'password', rules: [{type: 'minLength[6]', prompt: '密码必须大于六位'}]}
          }
     });
});
  </script>

<div class="ui middle aligned center aligned grid">
	<div class="column">
		<div class="ui icon message">
			<i class="notched circle loading icon"></i>
			<div class="content">
				<div class="header" id="waitheader">请稍后</div>
				<p id="waitmessage"></p>
			</div>
		</div>
		<div class="ui error message" id="backmess"></div>
		<form class="ui large form" method="post">
			<div class="ui stacked segment">
				<h2 class="ui image header">学生云系统</h2>

				<h4 class="ui horizontal divider header">
					<i class="user icon"></i> 登录
				</h4>
				<br />
				<div class="field">
					<div class="ui left icon input">
						<i class="user icon"></i> <input type="text" name="userid"
							placeholder="邮箱/UID">
					</div>
				</div>
				<div class="field">
					<div class="ui left icon input">
						<i class="lock icon"></i> <input type="password" name="password" id="password"
							placeholder="密码">
					</div>
				</div>
				<div class="ui fluid large submit button">登录</div>
			</div>
		</form>
	</div>
</div>


</body>

</html>
